<template>
  <div class="container">
    <div style="margin-top: 5px; color: #606266; font-size: 15px">
      <span style="margin-right: 10px">档案名称:</span>
      <el-input
        v-model="archTitle"
        clearable
        placeholder="请输入检索的档案名称"
        style="width: 200px; margin-right: 20px"
        size="small"
      />
      <span>档案状态:</span>
      <el-select
        v-model="appState"
        placeholder=""
        style="margin: 0 10px"
        size="small"
      >
        <el-option
          v-for="item in stateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" size="mini" @click="getData()">检索</el-button>
    </div>
    <el-table
      v-loading="isLoading"
      border
      :data="listData"
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column prop="archMainCode" align="center" label="档案编号" />
      <el-table-column
        align="center"
        prop="archTitle"
        label="档案名称"
        width="width"
      />
      <el-table-column
        align="center"
        prop="archCateName"
        label="档案类别"
        width="width"
      />
      <el-table-column
        align="center"
        prop="staffCode4App"
        label="借阅人"
        width="width"
      />
      <!-- <el-table-column prop="archFiles" align="center" label="档案附件">
        <template>
          <el-link type="primary">水利工程附件</el-link>
        </template>
      </el-table-column> -->
      <el-table-column prop="username4Approval" align="center" label="审批人" />
      <el-table-column prop="appState" align="center" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.appState === 0" class="warning">申请中</span>
          <span
            v-else-if="scope.row.appState === 5"
            class="success"
          >申请通过</span>
          <span v-else-if="scope.row.appState === 7" class="info">已过期</span>
          <span v-else class="danger">申请驳回</span>
          <!-- <span v-if="scope.row.appState === 0" class="primary">申请中</span>
          <span v-if="scope.row.appState === 5" class="success">申请通过</span>
          <span v-if="scope.row.appState === 10" class="danger">申请驳回</span> -->
        </template>
      </el-table-column>
      <el-table-column
        prop="estBorrowDay"
        align="center"
        :formatter="dateFormat"
        label="借阅日期"
      />
      <el-table-column prop="during" align="center" label="借阅天数" />
      <!-- <el-table-column prop="notes" align="center" label="备注">
      </el-table-column> -->
      <el-table-column label="操作" align="center" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.appState === 0"
            type="primary"
            size="mini"
            @click="audit(5, scope.row)"
          >审核通过</el-button>
          <el-button
            v-if="scope.row.appState === 0"
            type="primary"
            size="mini"
            @click="audit(9, scope.row)"
          >审核拒绝</el-button>
          <span v-else>暂无操作</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page.sync="page.pageNum"
        :page-sizes="[10, 20, 50]"
        :page-size="page.pageSize"
        layout="sizes, total, prev, pager, next"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { approveApplication, qryArchApplication } from '@/api/archApplication'
import { getAllCategory } from '@/api/archCategory'
import { dateFormat } from '@/filters/index'
export default {
  data() {
    return {
      userInfo: {},
      isLoading: false,
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 10
      },
      listData: [],
      archTitle: '',
      stateOptions: [
        {
          value: '-1',
          label: '全部'
        },
        {
          value: 0,
          label: '申请中'
        },
        {
          value: 5,
          label: '申请通过'
        },
        {
          value: 10,
          label: '申请驳回'
        }
      ],
      appState: '-1'
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.getData()
    this.getAllCategory()
  },
  methods: {
    // 获取列表数据
    getData() {
      this.isLoading = true
      const { pageNum, pageSize } = this.page
      const param = {
        pageNum: pageNum,
        pageSize: pageSize,
        archTitle: this.archTitle,
        appState: parseInt(this.appState),
        type: '1' // 管理员查询借阅
      }
      qryArchApplication(param)
        .then((res) => {
          if (res.code === '0') {
            this.listData = res.data.records
            this.page.total = parseInt(res.data.total)
          }
        })
        .finally(() => {
          this.isLoading = false
        })
    },

    // 获取档案分类列表
    getAllCategory() {
      getAllCategory({
        pageNum: -1,
        pageSize: -1
      }).then((res) => {
        if (res.code === '0') {
          this.categoryOptions = res.data.records
        }
      })
    },
    dateFormat(row, column) {
      const daterc = row[column.property]
      return dateFormat(daterc, 0)
    },

    audit(type, row) {
      const param = {
        appState: type,
        estBorrowDay: Date.now(),
        archMainId: row.archMainId,
        username4Approval: this.userInfo.username,
        recid: row.recid
      }
      approveApplication(param).then((res) => {
        if (res.code === '0') {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getData()
        }
      })
    },

    handleSizeChange(val) {
      this.page.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getData()
    }
  }
}
</script>

<style scoped>
.pagination {
  width: auto;
  display: flex;
  margin-top: 10px;
  align-items: center;
}
.container {
  padding: 10px 0 0 20px;
}
.danger {
  color: #f56c6c;
}
.primary {
  color: #409eff;
}
.success {
  color: #67c23a;
}
.warning {
  color: #e6a23c;
}
.info {
  color: #909399;
}
</style>
